<template>
    <div class="container clearfix">
        <div class="left-block" :class="{'trans_in':show}">
            <div class="left-menu">
                <Menu :active-name="active_name" :open-names="open_id" v-for="(items, indexs) in businesslist" :key="indexs">
                    <Submenu :name="items.id">
                        <template slot="title">
                            <Icon type="ios-navigate"></Icon>
                            {{items.name}}
                        </template>
                        <Menu-item class="ellipsis"  @click.native="handleContent(item)" :name="'1-' + item.id" v-for="(item, index) in items.business.data" :key="index">
                        <p>{{item.name}}</p>
                        </Menu-item>
                    </Submenu>
                </Menu>
            </div>
        </div>
        <transition name="fade">
            <div class="layer" @click="showLayer(false)" v-show="show"></div>
        </transition>
        <div class="right-block business">
            <h2 class="title">{{article.name}}</h2>
            <p class="date">{{article.created_at}}</p>
            <div class="content" v-html="article.contents"></div>
        </div>
        <transition name="fade">
            <a class="affix" @click="showLayer(true)" v-show="!show">
                <Icon type="chevron-right"></Icon>
                <Icon type="chevron-right"></Icon>
                <Icon type="chevron-right"></Icon>
            </a>
        </transition>
	</div>
</template>
<script>
import $ from 'jquery';
import smartScroll from '../../utils/noscroll.js'
export default {
    data(){
        return{
            businesslist:[],
            openNames:null,
            article:{},
            show:false
        }
    },
    mounted(){
        this.getCarousel();
    },
    methods:{
        getCarousel(){
            this.$http.get('/bc/list',{
                params:{
                    include:'business',
                    fe:1
                }
            }).then(business => {
                this.businesslist =  business.data.data;
                this.open_id = [business.data.data[0].id];
                this.active_name = "1-" + business.data.data[0].business.data[0].id;
                this.article = business.data.data[0].business.data[0];
            }).catch(err => {

            })
        },
        handleContent(item){
            this.article = item;
        },
        selectMenu(val){
            console.log(JSON.parse(val))
        },
        showLayer(status){
            this.show = status;
            if(status){
                smartScroll($('.left-block'), '.left-menu');
                $('html').addClass('noscroll');
            }else{
                $('html').removeClass('noscroll');
            }
        }
    }
}
</script>
<style scoped>
.container{ max-width:1200px; margin:16px auto;}
.left-block{ border:1px solid #dddee1; float: left;}
.left-block .ivu-menu:after{ display:none;}
.right-block{ margin-left:250px; margin-top:20px; margin-bottom:40px; padding:0 20px;}
.right-block .title{ text-align:center; font-size:16px; font-weight:bold; line-height:32px;}
.right-block .date{ text-align:center;}
.right-block .content{ line-height:24px;}
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){ color:#15ccac; border-color:#15ccac;}
.affix{ display:none; }
@media (max-width: 1024px){
    .left-block{position: fixed; top:0; left:0; height:100%; z-index: 2; transition:all 0.2s linear 0s; transform:translate(-250px); }
    .right-block{ margin-left:0;}
    .left-menu{ width:250px; background:#fff; height:100%; z-index: 222; overflow-y:auto; -webkit-overflow-scrolling: touch;}
    .layer{ position: fixed;top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.4); z-index: 1;}
    .trans_in{ transform:translate(0);}
    .affix{ display:block; position: fixed; left:0; top:50%; margin-top:-50px; padding:20px 5px; background:#fff; border:1px solid #666; border-left:none; border-radius:0 3px 3px 0;}
    .affix i{ margin-right:-3px;}
}
</style>